<%--
  Created by IntelliJ IDEA.
  User: lingshao
  Date: 2020/9/16
  Time: 9:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>课程信息表</title>
    <script type="text/html" id="barDemo">
        <a href="javascript:;" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-warm layui-icon layui-icon-edit" style="font-size: 20px; font-family: 微软雅黑;" lay-event="edit">编辑</a>
        <a href="javascript:;"  class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger layui-icon layui-icon-delete"  style="font-size: 20px; font-family: 微软雅黑;" lay-event="delete" >删除</a>
    </script>

    <%--    引入layer--%>
    <script src="../jQuery/jquery-1.11.2.js"></script>
    <link rel="stylesheet" href="../layui/layui/css/layui.css" media="all">
    <script src="../layer/layer/layer.js"></script>

    <script src="../layui/layui/layui.js"></script>
    <style type="text/css">
        .layui-table-cell{
            height:36px;
            line-height: 36px;
        }
        *{
            font-size: 20px;
            font-family: 微软雅黑;
        }
    </style>

</head>
<body>

<blockquote class="layui-elem-quote news_search">
    <%--头部工具栏--%>
    <div class="demoTable" id="demoTableId" hidden="true">
        <form class="layui-form">
            <div style="float: right;margin-right: 150px;">
                <a href="javascript:;" class="layui-btn layui-btn-radius layui-icon layui-icon-add-circle " lay-event="add" style="font-size: 20px;">新建课程</a>
                <a href="javascript:;" class="layui-btn layui-btn-radius layui-btn-danger layui-icon layui-icon-delete " lay-event="allDelete" style="font-size: 20px;">批量删除</a>
            </div>
        </form>
    </div>

    <%--展示表格--%>
    <table id="demo" lay-filter="test"></table>
</blockquote>


<%--添加和修改弹出对话框--%>
<div style="display: none;" id="MaxDiv">
    <div style="margin-top: 50px;margin-left: 20px;">
        <form class="layui-form" id="mainForm" method="post" lay-filter="classManagerForm">
            <div class="layui-form-item" hidden="true">
                <label class="layui-form-label">课程编号</label>
                <div class="layui-input-inline">
                    <input  type="text" name="courseId"  id="stopId"  placeholder="请输入课程编号" autocomplete="off" class="layui-input " value="0" >
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">课程名称</label>
                <div class="layui-input-inline" style="width: 300px">
                    <input  type="text" name="courseName"  id="stopText"  placeholder="请输入课程名称" lay-verify="required" autocomplete="off" class="layui-input " value="" >
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn   " style="margin-left: 40px"  id="okk"  lay-submit lay-filter="okkFilter" >确认</button>
                    <button type="reset" class="layui-btn layui-btn-warm">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>


<script type="text/javascript">
    layui.use(['table','layer','form'], function(){
        var table = layui.table;
        var layer=layui.layer;
        var form=layui.form;
        //定义一个编号，便于后期关闭div对话框
        var closeDiv;
        //第一个实例，渲染表格
        table.render({
            elem: '#demo'
            ,cellMinWidth: 80
            ,toolbar:"#demoTableId"
            ,height:665
            ,url: '../CourseServlet?method=findAll' //数据接口
            , limits: [5,10,15,20]  //一页选择显示3,5或10条数据
            , limit: 5  //一页显示10条数据
            /*, parseData: function (res) { //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
                var result;
                if (this.page.curr) {
                    result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                }
                else {
                    result = res.data.slice(0, this.limit);
                }
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": result //解析数据列表
                };
            }*/
            ,cols: [[ //表头
                {type:"checkbox",fixed: "left" ,style: "50px"}
                ,{field: 'courseId',style:"font-size:20px" , title: '课程编号', fixed: 'left'}
                ,{field: 'courseName',style:"font-size:20px" , title: '课程名称' /*,
                    templet:function (d) {
                        if (d.courseName == "javaweb"){
                            return'<span>javaweb</span>';
                        }else if (d.courseName == "java基础"){
                            return'<span>java基础</span>';
                        }else if (d.courseName == "java面向对象"){
                            return'<span>java面向对象</span>';
                        }else if (d.courseName == "mysql数据库"){
                            return'<span>java面向对象</span>';
                        }else if (d.courseName == "javascript"){
                            return'<span>javascript</span>';
                        }else if (d.courseName == "layui"){
                            return'<span>layui</span>';
                        }
                    }*/}
                ,{fixed: 'right',style:"font-size:20px" , title:'操作', toolbar: '#barDemo',align:'center'}
            ]]
            ,page:true
        });


        //为删除和编辑事件
        /*
        * 删除：首先捕捉在功具条点击事件(添加对应的内置监听事件)，在函数中接收事件源，事件源.event获得的值即为
        * 点击标签的lay-event属性的值，取出值进行判断后，询问用户是否确认删除，确认后，通过ajax发送数据，接收
        * 响应后弹出提示并关闭询问框，最后刷新表格
        * */
        table.on("tool(test)",function(e){
            //判断点击的是删除事件
            //取得点击行的数据
            var data=e.data;
            if (e.event=="delete"){
                layer.confirm("确认要删除吗？",function(index){
                    //形式上删除这一行
                    e.del();
                    $.ajax({
                        type:"GET",
                        url:"../CourseServlet?method=delete",//该路径仅供测试
                        data:"courseId="+data.courseId,
                        dataType:"text",
                        success:function(data){
                            if (data=="ok"){
                                layer.msg("删除成功",{icon:1,time:2000});
                                //添加成功，返回了一行数据id,servlet接收后删除，删除成功后返回ok
                            }else{
                                layer.msg("删除失败",{icon:2,time:2000});
                            }
                        }
                    });
                    //刷新表格
                    table.reload('demo',{
                        page:{
                            curr:1
                        }
                    });
                    //点击后关闭对话框
                    layer.close(index);
                    //刷新表格
                    table.reload("demo");
                });
            }else if (e.event=="edit"){//判断点击的为编辑
                //将确认按钮改为修改
                $("#okk").text("修改");
                //打开对话框
                closeDiv=layer.open({
                    type:1,
                    title:"标题",
                    offset: 'auto',
                    area:["500px","210px"],
                    content:$("#MaxDiv").html()
                });
                //将数据添加到表单当中
                form.val("classManagerForm",{
                    "courseId":data.courseId,
                    "courseName":data.courseName
                });

            }
        });

        //判断点击的是搜索
        form.on("submit(search)",function(data){
            //获取数据
            var dataTable=data.field;
            if (dataTable.courseId!="" || dataTable.courseName!="" ){
                //重载表格，刷新时发送数据
                table.reload("demo",{
                    page:{//刷新后从第几页开始显示
                        curr: 1
                    },
                    where:{
                        courseId:dataTable.courseId,
                        courseName:dataTable.courseName,
                    }
                });
            }else{
                layer.msg("输入内容不能为空");
            }
            return false;
        });


        //判断点击的是添加还是批量删除
        table.on("toolbar(test)",function (data) {
            //判断点击的是添加
            if (data.event=="add"){
                //将确认按钮改为增加
                $("#okk").text("增加");
                //调出窗口
                closeDiv=layer.open({
                    type:1,
                    title:"标题",
                    offset: 'auto',
                    area:["500px","210px"],
                    content:$("#MaxDiv").html()
                });

            }else if (data.event=="allDelete"){//点击的是批量删除
                //拿到复选框选中行数据
                var data1=table.checkStatus(data.config.id).data;
                if (data1.length>0){
                    layer.confirm('确定要删除吗?', {icon: 3, title:'提示'}, function(index){
                        var str="";
                        $.each(data1,function(index,item){
                            str+=item.courseId+",";
                        });
                        str=str.substring(0,str.length-1);
                        //通过ajax发送数据
                        $.ajax({
                            type:"GET",
                            url:"../CourseServlet?method=batchDel",
                            data:"courseIdStr="+str,
                            dataType:"text",
                            success:function(data){
                                if (data=="ok"){
                                    layer.msg("删除成功")
                                }else{
                                    layer.msg("删除失败")
                                }
                            }
                        });
                        table.reload('demo');
                        layer.close(index);
                    });
                }else{
                    layer.msg("请选择数据再进行删除！");
                }
            }
        });


        //判断点击的是修改还是增加
        form.on("submit(okkFilter)",function(data){
            //拿到jQuery元素
            var elem=$("#okk").text();
            //var elem=$(data.elem);//因为拿到的是dom对象所以要转换成jqeury对象才可以调用text()
            //alert(elem.text());
            //判断点击的按钮是修改还是增加
            if (elem=="修改"){
                //将数据发送到服务器端
                $.ajax({
                    type:"POST",
                    url:"../CourseServlet?method=update",
                    data:"json="+JSON.stringify(data.field),
                    dataType:"text",
                    success:function(data){
                        //判断修改是否成功
                        if (data=="ok"){
                            layer.msg("修改成功");
                        }else{
                            layer.msg("修改失败");
                        }
                    }
                });
                //刷新表格
                table.reload('demo');
                //不管添加成功还是失败，都需要清空对话框，防止为下次添加时造成影响
                $("#mainForm")[0].reset();
                //关闭对话框
                layer.close(closeDiv);
                return false;//不进行跳转，也就是不再表格显示时再次请求XXX.json
            }else if (elem=="增加"){//判断点击的为增加
                //将数据发送到服务器端
                $.ajax({
                    type:"POST",
                    url:"../CourseServlet?method=add",
                    data:"json="+JSON.stringify(data.field),
                    dataType:"text",
                    success:function(data){
                        if (data=="ok"){
                            layer.msg("添加成功");
                        }else{
                            layer.msg("添加失败");
                        }
                    }
                });
                //刷新表格
                table.reload('demo');
                //清空表单框
                $("#mainForm")[0].reset();
                //关闭窗口
                layer.close(closeDiv);
                //不跳转
                return false;
            }
        });
    });
</script>
</body>
</html>
